import React, { useEffect, useRef, useState } from 'react';
import RelationGraph, { RGJsonData, RGNode, RGLine, RGLink, RGOptions, RGUserEvent, RelationGraphComponent } from 'relation-graph/react';
import './index.scss';

const nodeContentTypes = [
  'DIV',
  'Vue Component',
  'React Component',
  'Even videos'
];
function MyCarousel({ contents }:{contents:string[]}) {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleNext = () => {
    console.log('handleNext:', (activeIndex + 1) % contents.length);
    setActiveIndex((activeIndex) => (activeIndex + 1) % contents.length);
  };

  const handlePrev = () => {
    console.log('handleNext:', (activeIndex - 1 + contents.length) % contents.length);
    setActiveIndex((activeIndex) => (activeIndex - 1 + contents.length) % contents.length);
  };

  return (
    <div className="w-full h-full relative">
      <div className="w-full h-full flex justify-center place-items-center">
        {contents[activeIndex]}
      </div>
      <div className="absolute bottom-0 left-0 right-0 flex justify-center space-x-4 p-4">
        <button onClickCapture={() => { handlePrev(); }} className="bg-gray-500 hover:bg-gray-600 text-white px-2 py-1 rounded">
          Previous
        </button>
        <button onClick={() => { handleNext(); }} className="bg-gray-500 hover:bg-gray-600 text-white px-2 py-1 rounded">
          Next
        </button>
      </div>
    </div>
  );
}
const NodeSlot = ({ node }: { node: RGNode }) => {
  const clickMyButton = () => {
    console.log('clickMyButton:', node.id);
  };
  if (node.id === 'a') {
    return (
      <MyCarousel contents={nodeContentTypes}>
      </MyCarousel>
    );
  } else if (node.id === 'c') {
    return (
      <div className="relative h-56 w-72 rounded-lg overflow-hidden">
        <video
          playsInline
          className="h-full w-full object-cover overflow-clip-margin-content-box overflow-clip"
          controls
          autoPlay
          loop
          muted
          src="https://relation-graph.com/images/video-dribbble.mp4"
        />
        <div className="absolute left-5 top-5 text-white text-20 text-center leading-30 w-full">
          This is a video
        </div>
      </div>
    );
  } else if (node.data?.type === 'my-button') {
    return (
      <div onClick={() => { clickMyButton(); }}>
        <button className="w-36 h-10 px-6 font-semibold rounded-md bg-black text-white">My button</button>
      </div>
    );
  } else {
    return <>{node.text}</>;
  }
};
const MyComponent = () => {
  const graphRef = useRef<RelationGraphComponent>();
  const graphOptions: RGOptions = {
    debug: true,
    allowSwitchLineShape: true,
    allowSwitchJunctionPoint: true,
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 1,
    defaultNodeBorderColor: 'rgba(255, 255, 255, 0.3)',
    defaultNodeFontColor: '#ffffff',
    defaultNodeShape: 0,
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    defaultPloyLineRadius: 10,
    defaultLineShape: 2,
    defaultJunctionPoint: 'ltrb',
    layout: {
      layoutName: 'tree',
      from: 'left',
      min_per_width: 400,
      min_per_height: 90
    }
  };

  useEffect(() => {
    showGraph();
  }, []);

  const showGraph = async () => {
    const __graph_json_data: RGJsonData = {
      rootId: 'a',
      nodes: [
        { id: 'a', text: 'a', nodeShape: 1, width: 400, height: 150, offset_x: -200 },
        { id: 'b', text: 'b' },
        { id: 'b1', text: 'b1', nodeShape: 1, width: 200, height: 50 },
        { id: 'b1-1', text: 'b1-1', nodeShape: 1, width: 200, height: 50 },
        { id: 'b1-2', text: 'b1-2', nodeShape: 1, width: 200, height: 50 },
        { id: 'b1-3', text: 'b1-3', nodeShape: 1, width: 200, height: 50 },
        { id: 'b1-4', text: 'b1-4', nodeShape: 1, width: 200, height: 50 },
        { id: 'b1-5', text: 'b1-5', nodeShape: 1, width: 200, height: 50 },
        { id: 'b1-6', text: 'b1-6', nodeShape: 1, width: 200, height: 50 },
        { id: 'b2', text: 'b2' },
        { id: 'b2-1', text: 'b2-1' },
        { id: 'b2-2', text: 'b2-2' },
        { id: 'c', text: 'c', nodeShape: 1 },
        { id: 'c1', text: 'c1', nodeShape: 1, borderWidth: 1, data: { type: 'my-button' } },
        { id: 'c2', text: 'c2', nodeShape: 1, borderWidth: 1, data: { type: 'my-button' } },
        { id: 'c3', text: 'c3', nodeShape: 1, borderWidth: 1, data: { type: 'my-button' } }
      ],
      lines: [
        { from: 'a', to: 'b', text: '' },
        { from: 'b', to: 'b1', text: '' },
        { from: 'b1', to: 'b1-1', text: '' },
        { from: 'b1', to: 'b1-2', text: '' },
        { from: 'b1', to: 'b1-3', text: '' },
        { from: 'b1', to: 'b1-4', text: '' },
        { from: 'b1', to: 'b1-5', text: '' },
        { from: 'b1', to: 'b1-6', text: '' },
        { from: 'b', to: 'b2', text: '' },
        { from: 'b2', to: 'b2-1', text: '' },
        { from: 'b2', to: 'b2-2', text: '' },
        { from: 'a', to: 'c', text: '' },
        { from: 'c', to: 'c1', text: '' },
        { from: 'c', to: 'c2', text: '' },
        { from: 'c', to: 'c3', text: '' }
      ]
    };
    __graph_json_data.nodes.forEach(node => {
      node.alignItems = 'left';
    });
    const graphInstance = graphRef.current?.getInstance();
    await graphInstance?.setJsonData(__graph_json_data);
    await graphInstance?.moveToCenter();
    await graphInstance?.zoomToFit();
  };

  return (
    <div>
      <div className="my-graph" style={{ height: '100vh' }}>
        <div style={{ position: 'absolute', left: '10px', top: '10px', backgroundColor: 'rgba(255,255,255, 0.3)', borderRadius: '10px', fontSize: '12px', color: '#ffffff', padding: '10px' }}>
          Fully customize the graphical elements of the graph using div+css, Vue components, and React components through slots

          <br />
          Use div+css, Vue components, and React components to fully customize the graphical elements of the graph through slots.
        </div>
        <RelationGraph ref={graphRef} options={graphOptions} nodeSlot={NodeSlot} />
      </div>
    </div>
  );
};

export default MyComponent;

// SCSS styles go here
